<template>
  <div class="detail">
    <NavHeader :title="poi_name"/>
      <div class="tab-bar">
        <a
          class="tab-item active" @click="urlChange('/detailbook')" >{{detail_tabs[0].name}}
        </a>
        <a
          class="tab-item"   @click="urlChange('/detailevaluation')" >{{detail_tabs[1].name}}
        </a>
        <a
          class="tab-item "  @click="urlChange('/detailaddress')" >{{detail_tabs[2].name}}
        </a>
      </div>
      <div class="mask" v-if="show_choose_content"></div>
      <Menu />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import  NavHeader from "@/components/common/NavHeader"
import  Menu from "@/components/detail/Menu"
export default {
  data(){
    return {
    }
  },
   computed: {
  ...mapState(['poi_name','detail_tabs','book_list_data','current_left_index','show_choose_content'])
  },
  components: {
    NavHeader,
    Menu
  },
  mounted() {

  },
  methods:{
    urlChange(url){
      this.$router.push({ path: url, query: { id: this.$route.query.id}})
    }
  }
}
</script>

<style lang="stylus">
  .detail {
    .mask {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background-color: rgba(0,0,0,0.7);
      z-index:9999;
    }
    .tab-bar {
      font-size: (16px);
      display: flex;
      border-bottom: 1px solid #f0f0f0;
      margin-top: (1.28rem);
      .tab-item {
        flex: 1;
        height: (0.9rem);
        line-height:(0.9rem);
        position: relative;
        color: #666;
        text-align: center;
        text-decoration: none;
        &.active {
          &:after {
            content: '';
            display: block;
            height: 0.08rem;
            width: 1.2rem;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            background-color: #ffd161;
          }
        }
      }
    }

  }
</style>
